<template>
	<view class="tab-box">
		<view class="tab-box-inner">
			<view v-for="tabitem in tab_list" class="item" :class="{'active':active_tabid==tabitem.id}"
				@click="navTo(tabitem)">
				<image v-if="tabitem.id==3" src="/static/image/add.png"></image>
				<text v-else>{{tabitem.text}}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		// getCurrentInstance,
		// defineProps,
		onMounted,
		ref
	} from 'vue';
	const props = defineProps({
		//当前激活的tab
		active_tabid: Number
	});
	const tab_list = [{
			text: '蛇',
			pagePath: '/pages/tab1/index',
			id: 1
		},
		{
			text: '年',
			pagePath: '/pages/tab2/index',
			id: 2
		},
		{
			text: '',
			pagePath: '/pages/tab3/index',
			id: 3
		},
		{
			text: '大',
			pagePath: '/pages/tab4/index',
			id: 4
		},
		{
			text: '吉',
			pagePath: '/pages/tab5/index',
			id: 5
		},
	];

	function navTo(tabItem) {
		const {
			id,
			pagePath
		} = tabItem;
		if (id == 3) {
			uni.navigateTo({
				url: '/pages/tab3/index'
			})
			return
		}
		uni.switchTab({
			url: pagePath
		});
	}
</script>

<style lang="less" scoped>
	.tab-box {
		position: fixed;
		width: 100vw;
		height: auto;
		left: 0;
		bottom: 0;
		right: 0;

		.tab-box-inner {
			border-radius: 50rpx 50rpx 0 0;
			overflow: hidden;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #5d5d5d54;
			backdrop-filter: blur(10rpx);
			width: 100%;
			height: 148rpx;
			padding: 0 20rpx;

			.item {
				flex: 1;
				text-align: center;
				position: relative;
				font-weight: 700;
				color: #fff;

				image {
					width: 100%;
					height: 100rpx;
				}

				&.active {
					color: #2DB88F;

					&::after {
						content: " ";
						margin: auto;
						width: 26rpx;
						height: 6rpx;
						background: #2DB88F;
						border-radius: 356rpx;
						position: absolute;
						left: 0;
						right: 0;
						bottom: -10rpx;
					}
				}
			}
		}

	}
</style>